<template>
  <div class="side-menu-wrapper"
       ref="sideMenuWrapper">
    <Menu class="side-menu"
          theme="dark"
          :open-names="['1']"
          :width="'200px'">
      <Submenu name="1">
        <template slot="title">
          <Icon type="ios-paper" />
          租户管理
        </template>
        <MenuItem name="1-1">企业管理</MenuItem>
        <MenuItem name="1-2">租户队列管理</MenuItem>
        <MenuItem name="1-3">坐席管理</MenuItem>
        <MenuItem name="1-3">黑名单管理</MenuItem>
        <MenuItem name="1-3">IVR流程管理</MenuItem>
        <MenuItem name="1-3">语音模板管理</MenuItem>
      </Submenu>
      <Submenu name="2">
        <template slot="title">
          <Icon type="ios-people" />
          用户管理
        </template>
        <MenuItem name="2-1">新增用户</MenuItem>
        <MenuItem name="2-2">活跃用户</MenuItem>
      </Submenu>
      <Submenu name="3">
        <template slot="title">
          <Icon type="ios-stats" />
          统计分析
        </template>
        <MenuGroup title="使用">
          <MenuItem name="3-1">新增和启动</MenuItem>
          <MenuItem name="3-2">活跃分析</MenuItem>
          <MenuItem name="3-3">时段分析</MenuItem>
        </MenuGroup>
        <MenuGroup title="留存">
          <MenuItem name="3-4">用户留存</MenuItem>
          <MenuItem name="3-5">流失用户</MenuItem>
        </MenuGroup>
      </Submenu>
      <Submenu name="4">
        <template slot="title">
          <Icon type="ios-stats" />
          统计分析
        </template>
        <MenuGroup title="使用">
          <MenuItem name="4-1">新增和启动</MenuItem>
          <MenuItem name="4-2">活跃分析</MenuItem>
          <MenuItem name="4-3">时段分析</MenuItem>
        </MenuGroup>
        <MenuGroup title="留存">
          <MenuItem name="4-4">用户留存</MenuItem>
          <MenuItem name="4-5">流失用户</MenuItem>
        </MenuGroup>
      </Submenu>
    </Menu>
  </div>

</template>
<script>
export default {
  name: 'side-menu',
  data() {
    return {
      scroll: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = this.$createScroll(this.$refs.sideMenuWrapper, {
        mouseWheel: {
          speed: 1,
          easeTime: 1000
        }
      })
    })
  },
  methods: {}
}
</script>

<style lang="stylus" scoped>
.side-menu-wrapper
  position absolute
  height 100%
  background red
  overflow hidden
  background $color-sub

  .side-menu
    background none

    .ivu-menu-submenu
      >>>.ivu-menu-item-active
        background $color-main !important

      >>>.ivu-menu-submenu-title:hover
        background $color-sub-light

    .ivu-menu-opened
      background $color-sub-dark

      >>>.ivu-menu-submenu-title
        background $color-sub-light
</style>
